<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ include file="include.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<title>老师端</title>
</head>
<body>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul >
		<li>
			<p align="right"><a href="${CTX_PATH}/index.jsp"><span class="glyphicon glyphicon-log-out" > </span> 安全退出</a></p>
		</li>
	</ul>
</div>

<!--<p align><a href="javascript:void(0)" id="adoOut" >
   退出</a></p>-->
<style type="text/css">
	body{
		background-image: url(https://i.loli.net/2021/06/20/PcTrLkq64NjGWZ5.jpg);
		background-size:cover;
		background-attachment: fixed;
	}
</style>
<div class="" style="margin-top: 50px;">
	<div class="container">
		<h1 align="center">齐鲁工业大学二维码签到系统</h1>

	</div>
</div>
<div class="container" style="margin-bottom:25px">

	<div class="col-lg-3" >
		<div class="list-group">
			<a href="#" id="a_set" class="list-group-item active">设置</a>
		</div>
	</div>
	<div class="col-lg-9" id="teacher_con">

		<div id="div_set" >
			<table class="table">
				<tr>
					<td>服务器</td>
					<td><input type="text"  class="form-control"  name="" id="txtVal" value="http://47.117.35.231:8082/qr_check/servlet/StuQDServlet"/></td><!--http://127.0.0.1:8080/qr_check/servlet/StuQDServlet-->
					<td></td>
				</tr>
				<tr>
					<td>二维码</td>
					<td><input type="text"  class="form-control"  name="" id="txtCode" value="https://api.pwmqr.com/qrcode/create/?url="/></td>
					<td></td>
				</tr>

			</table>


			<div id="form_modify_passwd">
				<table  class="table" style="display:none">

				</table>

			</div>
			<br>
			<br>
		</div>


		<div id="div_qd" style="display: none;">

			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">考勤</a></li>
				<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span onclick="getClassQDRecord()">出勤记录</span></a></li>
				<!-- Tab panes -->
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane active" id="home" align="center">

						<img style="height: 500px; width: 500px;"  id="erweiCode"/><!--此处二维码生成图片-->
					</div>
					<div role="tabpanel" class="tab-pane" id="profile">
						<div class="col-lg-12">

							<!--<table class="table">
								<tr>
									<td>开始日期</td>
									<td><input type="text" class="form-control" name=""  id="stime" value="" /></td>
									<td>结束日期</td>
									<td><input type="text" class="form-control" name="" id="etime" value="" /></td>
									<td>
										<input type="button" name="" id="" onclick="getClassQDRecord()" value="搜索" class="btn btn-primary" />

									</td>

								</tr>
							</table>-->

						</div>
						<div class="col-lg-12">
							<table id="classqdrecodeTable" class="table table-striped table-hover table-bordered">
								<tr id="table_classqd_data">
									<td>姓名</td>
									<td>性别</td>
									<td>学号</td>
									<td>签到时间</td>
									<td>是否签到</td>
								</tr>

							</table>
						</div>
					</div>
				</div>
		</ul>
<%--		</div>--%>
		<script type="text/javascript">
			var did; //课程编号
			var stime="";  //签到时间
			var teacherId='<%=request.getAttribute("teacherId")%>';	//登录的老师的ID
			//当网页dom结构加载完毕之后
			$(function(){
				//excel函数
				//var idTmr;
				function  getExplorer() {
				}
				/*function method1(tableid) {//整个表格拷贝到EXCEL中

				}*/
				function Cleanup() {
				}
				var tableToExcel = (function() {
				})()
				//时间函数
				//startTime();
				getTeacherClass(teacherId);//填充老师带班信息
				$("#btn-click-excel").click(function(){
					//method1('classqdrecodeTable');
				})
				$(window).scroll(function() {
				});

				$goTop.click(function() {
				});

			});

			//左侧菜单点击事件
			$("#a_set").click(function(){

				//先去处已经获得焦点的标签的样式
				//$(".active")表示获取拥有active样式的元素对象
				//removeclass意思是移除这个对象的active样式
				$(".col-lg-3").find(".active").removeClass("active");
				//this代表当前
				//this是指向当前正在使用的那个对象的一个引用
				$(this).addClass("active");

				$("#div_qd").fadeOut(500,function(){
					$("#div_set").fadeIn(500);//显示设置区域
				});

			});

			//发送ajax请求获取数据
			//ajax默认是异步请求的
			//就是说 发送了请求之后，不需要等待服务器的返回就可以执行其他的代码
			function getTeacherClass(teacherId){
				$.ajax({
					type : "POST", //提交方式
					url : "${CTX_PATH}/servlet/GetTeacherClassServlet",//路径
					data:{
						"teacherId":teacherId
					},
					dataType:"json",
					success : function(result) {//返回数据根据结果进行相应的处理

						$.each(result,function(index,item)
						{

							$(" <a href='#' id='"+item.did+"' class='list-group-item a_kq'>"+item.dnjname+item.dzyname+item.dbjname+"<span class='badge'>0</span></a>").insertBefore("#a_set");
						});

						classClick();

						//当 老师 带班信息加载完毕之后需要查询 这个班级中的消息条目

						getClassQJData();
					}
				});
			}

			//为班级考勤和设置链接增加点击事件的处理
			function classClick(){
				$(".a_kq").click(function(){
					//字典的编号，一条字典数据就是一个班级的完整信息
					did=$(this).attr("id");

					//先去处已经获得焦点的标签的样式
					//$(".active")表示获取拥有active样式的元素对象
					//removeclass意思是移除这个对象的active样式
					//先粗后细
					//意思就是先获取一个大的区域，再在这个区域中进行筛选和过滤
					$(".col-lg-3").find(".active").removeClass("active");

					$(this).addClass("active");
					//获取老师选择的上课时间

					var cks=document.getElementsByName("startTime");//通过元素的name属性值获取一组 html标签 这是一个数组
					for(var i=0;i<cks.length;i++)
					{
						if(cks[i].checked==true)
						{
							stime=cks[i].value;
							break;
						}
					}

					$("#div_set").fadeOut(500,function(){
						//为图片赋一个地址

						//二维码的地址，我们让后台帮助前台生成【计算】
						//前台只用调用即可
						//这样做的好处是在后台可以轻松的操作session
						//调用设置二维码地址方法
						setEWImage();

						$("#div_qd").fadeIn(500,function(){

						});
					});


					//根据字典id查找 班级有多少个人。

					getqdfunction();


				});
			}

			//设置二维码的地址
			function setEWImage(){
				//alert(11);
				//$("#erweiCode").fadeOut(5);

				var path=$("#txtCode").val()+$("#txtVal").val()+"?did="+did+","+stime;

				$.ajax({
					type : "POST", //提交方式
					url : "${CTX_PATH}/servlet/EWImagePathServlet",//路径
					data:{
						"path":path
					},
					success : function(result) {//返回数据根据结果进行相应的处理
						$("#erweiCode").attr("src",result).load(function(){
							//$("#erweiCode").fadeIn(5);
							setTimeout(setEWImage,60000);//设置二维码变换时间

						});



					}
				});
			}

			function getqdfunction(){
				$.ajax({
					type : "POST", //提交方式
					url : "${CTX_PATH}/servlet/GetQDDataServlet",//路径
					data:{
						"classno":did,
						"time":stime
					},
					dataType:"json",
					success : function(result) {//返回数据根据结果进行相应的处理
						$.each(result,function(index,item){
							if(index==0){
								$("#yqdSpan").text(item);
							}else{
								$("#sjqdSpan").text(item);
							}

						});
					}
				});

				setTimeout(getqdfunction,60000);//过上一秒钟，让程序再次调用  getqdfunction 这个函数
			}



			//ajax获取 本班级签到数据
			function getClassQDRecord(){
				dhtmlx.message({
					/*text:'数据加载中',
					expire: 3000*/
				});



				$.ajax({
					type : "POST", //提交方式
					url : "${CTX_PATH}/servlet/GetClassQDRecordServlet",//路径
					data:{
						"classno":did,//在此处需要注意当前台没有传递某个参数的时候，后台获取这个参数 拿到的值就是null 不会报错
						"sday":$("#stime").val(),
						"eday":$("#etime").val()
					},
					dataType:"json",
					success : function(result) {//返回数据根据结果进行相应的处理



						$("#classqdrecodeTable").find("tbody").children(":gt(0)").remove();

						$.each(result,function(indx,d){

							var newTime = new Date(d[3]); //就得到普通的时间了
							var n=	newTime.getFullYear()+"-";
							var y=	newTime.getMonth()+1+"-";
							var r=	newTime.getDate();
							var zt;

							zt= (d[4]>0 ?"正常":"迟到" );


							if( d[5]==1){
								zt='缺勤';
							}

							var rowdata="<tr>"+
									"<td>"+d[0]+"</td>"+
									"<td>"+(d[1]==0?"女":"男")+"</td>"+
									"<td>"+d[2]+"</td>"+
									"<td>"+(n+y+r)+"</td>"+
									"<td>"+zt+"</td>"+
									"</tr>";

							$("#table_classqd_data").after(rowdata);
						});

						//$(".dhtmlx_message_area").fadeOut(500);
						$(".dhtmlx_message_area").empty();//清空

					}
				});
			}
		</script>
</body>
</html>